<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="auto"
               label-position="right" class="basic-grey">
          <h1>病人信息填写

            <span>Patient information filling</span>

          </h1>

          <el-form-item label="门诊号" prop="patientId">
            <el-input v-model="formData.patientId" placeholder="请输入门诊号" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>


          <el-form-item label="家庭住址" prop="hosptilPatientadd">
            <el-input v-model="formData.hosptilPatientadd" placeholder="请输入家庭住址" clearable
                      :style="{width: '90%'}"></el-input>
          </el-form-item>


          <el-form-item label="紧急联系人" prop="contactPerson1">
            <el-input v-model="formData.contactPerson1" placeholder="请输入紧急联系人" clearable
                      :style="{width: '90%'}"></el-input>
          </el-form-item>

          <el-form-item label="科室" prop="deptId">
            <el-select v-model="formData.deptId" placeholder="请选择科室" @change="filtrate(formData.deptId)" clearable :style="{width: '90%'}">
              <el-option
                v-for="dept in deptList"
                :key="dept.value"
                :label="dept.deptName"
                :value="dept.deptId">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="医生" prop="docterId">
            <el-select v-model="formData.docterId" placeholder="请选择医生" clearable :style="{width: '90%'}">
              <el-option
                v-for="item in doctorList"
                :key="item.value"
                :label="item.doctorName"
                :value="item.doctorId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="护士" prop="docter2Id">
            <el-select v-model="formData.docter2Id" placeholder="请选择护士" clearable :style="{width: '90%'}">
              <el-option
                v-for="item in nurseList"
                :key="item.value"
                :label="item.doctorName"
                :value="item.doctorId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="病床" prop="bedId">
            <el-select v-model="formData.bedId" placeholder="请选择病床" clearable :style="{width: '90%'}">
              <el-option
                v-for="item in bedList"
                :key="item.value"
                :label="item.bedName"
                :value="item.bedId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>

      </el-form>
    </el-row>

    <el-dialog :visible.sync="showsss" width="30%" title="病人信息确认">
      <el-form ref="inpatient" :model="inpatient"  size="mini">
        <el-form-item label="姓名" prop="patientName">
          <el-input v-model="inpatient.patientName" :disabled='true' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="dickerSex">
          <el-input v-model="inpatient.dickerSex" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="patientIdcard">
          <el-input v-model="inpatient.patientIdcard" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="patientAge">
          <el-input v-model="inpatient.patientAge" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="电话" prop="doctorTel">
          <el-input v-model="inpatient.doctorTel" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="住址" prop="hosptilPatientadd">
          <el-input v-model="inpatient.hosptilPatientadd" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="紧急联系人" prop="contactPerson1">
          <el-input v-model="inpatient.contactPerson1" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="科室" prop="deptName">
          <el-input v-model="inpatient.deptName" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="医生" prop="docterName">
          <el-input v-model="inpatient.docterName" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="护士" prop="docter2Name">
          <el-input v-model="inpatient.docter2Name" :disabled='true' clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="病床" prop="bedName">
          <el-input v-model="inpatient.bedName" :disabled='true' clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="showsss = false">返回</el-button>
        <el-button type="primary" @click="submitForm2">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {addHosptilnews, listDepts, listDoctor, showOne} from "@/api/hospital/hosptilnews";

export default {
  components: {},
  props: [],
  data() {
    return {
      showsss: false,
      inpatient: {},
      deptList: [],
      doctorList: [],//科室对应的医生
      nurseList: [],//科室对应的护士
      bedList: [],//科室对应的床位
      formData: {
        patientId: undefined,
        hosptilPatientadd: undefined,
        contactPerson1: undefined,
        deptId: undefined,
        docterId: undefined,
        docter2Id: undefined,
        bedId: undefined,
      },
      rules: {
        patientId: [{
          required: true,
          message: '请输入门诊号',
          trigger: 'blur'
        }],
        hosptilPatientadd: [{
          required: true,
          message: '请输入家庭住址',
          trigger: 'blur'
        }],
        contactPerson1: [{
          required: true,
          message: '请输入紧急联系人',
          trigger: 'blur'
        }],
        deptId: [{
          required: true,
          message: '请选择科室',
          trigger: 'change'
        }],
        docterId: [{
          required: true,
          message: '请选择医生',
          trigger: 'change'
        }],
        docter2Id: [{
          required: true,
          message: '请选择护士',
          trigger: 'change'
        }],
        bedId: [{
          required: true,
          message: '请选择病床',
          trigger: 'change'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.loadDepts();
  },
  mounted() {},
  methods: {
    /** 根据科室选择对应的医生、护士、床位 */
    filtrate(deptId){
      listDoctor(deptId).then(response => {
        this.doctorList = response.data.doctorList;
        this.nurseList = response.data.nurseList;
        this.bedList = response.data.bedList;
      });
    },
    /** 查询所有的科室 */
    loadDepts() {
      listDepts().then(response => {
        this.deptList = response.data.deptList;
      });
    },
    submitForm2() {
      addHosptilnews(this.formData).then(response => {
        this.$modal.msgSuccess("入院成功");
        this.showsss = false
        this.formData.patientId=undefined
        this.formData.hosptilPatientadd=undefined
        this.formData.contactPerson1=undefined
        this.formData.deptId=undefined
        this.formData.docterId=undefined
        this.formData.docter2Id=undefined
        this.formData.bedId=undefined
      });
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        showOne(this.formData).then(response => {
          this.inpatient = response.data.inpatient;
          this.showsss = true;
          //this.$modal.msgSuccess("返回成功");
        });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
.basic-grey {

  margin-left:auto;

  margin-right:auto;

  max-width: 500px;

  background: #FFF;

  padding: 30px 30px 20px 30px;

  box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;

  -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;

  font: 12px Arial, Helvetica, sans-serif;

  color: #666;

  border-radius: 10px;

  -webkit-border-radius: 10px;

}
.basic-grey h1 {

  font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;

  padding: 0px 0px 10px 40px;

  display: block;

  border-bottom: 1px solid #F5F5F5;

  margin: -10px -30px 10px -30px;

  color: #1e1e1e;

}
.basic-grey h1>span {

  display: block;

  font-size: 11px;

  color: #1e1e1e;

}



</style>
